---
title: Leaflet Control.Layers
description: This sample demonstrates how to pass ArcGIS Services to Leaflet's native <a href="http://leafletjs.com/reference-1.0.3.html#control-layers">Control.Layers</a> which allows users to switch between different base layers and switch overlays on/off
layout: example.hbs
---

<div id="map"></div>

<script>
  var gray = L.layerGroup();

  // more than one service can be grouped together and passed to the control together
  L.esri.basemapLayer("DarkGray").addTo(gray);
  L.esri.basemapLayer("GrayLabels").addTo(gray);

  var states = L.esri.featureLayer({
      url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
      style: function (feature) {
          return {color: '#bada55', weight: 2 };
      }
  });

  var map = L.map('map', {
      center: [39, -97.5],
      zoom: 4,
      layers: [gray, states]
  });

  var baseLayers = {
      "Grayscale": gray,
      "Streetmap": L.esri.basemapLayer("Streets")
  };

  var overlays = {
      "U.S. States": states
  };

  // http://leafletjs.com/reference-1.0.3.html#control-layers
  L.control.layers(baseLayers, overlays).addTo(map);
</script>